gameInfo = {
    roomId: null, // 房间 id
    thisUserId: null, // 当前玩家id
    thatUserId: null, // 对手玩家 id
    isWhite: true, // 是否是先手
}

//////////////////////////////////////////////////
// 设定界面显示相关操作
//////////////////////////////////////////////////

function setScreenText(me) {
    let screen = document.querySelector('#screen');
    if (me) {
        screen.innerHTML = "轮到你落子了!";
    } else {
        screen.innerHTML = "轮到对方落子了!";
    }
}

//////////////////////////////////////////////////
// 初始化 websocket
let webSocketUrl = "ws://" + location.host + "/game";
let webSocket = new WebSocket(webSocketUrl);
// 处理游戏就绪
webSocket.onmessage = function(e) {
    console.log("游戏就绪");
    let resp = JSON.parse(e.data);
    if (resp.code != 200) {
        if (resp.code == 300 || resp.code == 301) {
            location.replace("/game_hall.html");
        } else if (resp.code == 302) {
            alert("对手已离开游戏房间! 需返回游戏大厅重新匹配！");
            location.replace("/game_hall.html");
        } else if (resp.code == 402 || resp.code == 401){
            location.replace("/login.html")
        } else {
            alert("异常情况：" + resp.errorMessage);
        }
        return;
    }
    let readyResult = resp.data;
    gameInfo.roomId =  readyResult.roomId;
    gameInfo.thisUserId = readyResult.thisUserId;
    gameInfo.thatUserId = readyResult.thatUserId;
    gameInfo.isWhite = (readyResult.whiteUserId == gameInfo.thisUserId);
    // 初始化棋盘
    initGame();
    // 设置显示区域内容
    setScreenText(gameInfo.isWhite);
}

// 监听页面关闭事件，在页面关闭之前，手动调用 webSocker 的 close 方法
// 防止连接还没断开就关闭窗口
window.onbeforeunload = function() {
    webSocket.close();
}
// 连接发生错误时，回到游戏大厅
webSocket.onerror = function() {
    alert("连接异常！即将回到游戏大厅！");
    location.replace("/game_hall.html");
}


//--------------------------------------------
// 初始化一局游戏
//--------------------------------------------
function initGame() {
    // 是我下还是对方下. 根据服务器分配的先后手情况决定
    let me = gameInfo.isWhite;
    // 游戏是否结束
    let over = false;
    let chessBoard = [];
    //初始化chessBord数组(表示棋盘的数组)
    for (let i = 0; i < 15; i++) {
        chessBoard[i] = [];
        for (let j = 0; j < 15; j++) {
            chessBoard[i][j] = 0;
        }
    }
    let chess = document.querySelector('#chess');
    let context = chess.getContext('2d');
    context.strokeStyle = "#BFBFBF";
    // 背景图片
    let logo = new Image();
    logo.src = "img/chessboard.jpg";
    logo.onload = function () {
        context.drawImage(logo, 0, 0, 450, 450);
        initChessBoard();
    }

    // 绘制棋盘网格
    function initChessBoard() {
        for (let i = 0; i < 15; i++) {
            context.moveTo(15 + i * 30, 15);
            context.lineTo(15 + i * 30, 435);
            context.stroke();
            context.moveTo(15, 15 + i * 30);
            context.lineTo(435, 15 + i * 30);
            context.stroke();
        }
    }

    // 绘制一个棋子
    /**
     * 
     * @param {*} row 行 对应 y 坐标
     * @param {*} col 列 对应 x 坐标
     * @param {*} isWhite 
     */
    function oneStep(row, col, isWhite) {
        context.beginPath();
        context.arc(15 + col * 30, 15 + row * 30, 13, 0, 2 * Math.PI);
        context.closePath();
        var gradient = context.createRadialGradient(15 + col * 30 + 2, 15 + row * 30 - 2, 13, 15 + col * 30 + 2, 15 + row * 30 - 2, 0);
        if (!isWhite) {
            gradient.addColorStop(0, "#0A0A0A");
            gradient.addColorStop(1, "#636766");
        } else {
            gradient.addColorStop(0, "#D1D1D1");
            gradient.addColorStop(1, "#F9F9F9");
        }
        context.fillStyle = gradient;
        context.fill();
    }

    chess.onclick = function (e) {
        // 判断游戏是否结束
        if (over) {
            return;
        }
        // 当前是否轮到 我 落子
        if (!me) {
            return;
        }
        // 获取棋子的 x 和 y 坐标
        let x = e.offsetX;
        let y = e.offsetY;
        // 注意, 横坐标是列, 纵坐标是行
        let col = Math.floor(x / 30);
        let row = Math.floor(y / 30);
        if (chessBoard[row][col] == 0) {
            // TODO 发送坐标给服务器, 服务器要返回结果
            send(row, col);
            // oneStep(row, col, gameInfo.isWhite);
            // chessBoard[row][col] = 1;
        }
    }

    // 发送落请求
    function send(row, col) {
        let req = {
            userId: gameInfo.thisUserId,
            row: row,
            col: col
        }
        webSocket.send(JSON.stringify(req));
    }

    // 修改 webSocket.onmessage 方法
    // 让其针对落子响应进行处理
    webSocket.onmessage = function(e) {
        let resp = JSON.parse(e.data);
        if (resp.code != 200) {
            if (resp.code == 300 || resp.code == 301) {
                location.replace("/game_hall.html");
            } else if (resp.code == 402 || resp.code == 401){
                location.replace("/login.html")
            } else {
                alert("异常情况：" + resp.errorMessage);
            }
            return;
        }
        let gameRes = resp.data;
        if (gameInfo.thisUserId == gameRes.userId) {
            // 自己落的子，绘制自己颜色的子
            oneStep(gameRes.row, gameRes.col, gameInfo.isWhite);
        } else if (gameInfo.thatUserId == gameRes.userId) {
            // 对手的子，绘制对手颜色的子
            oneStep(gameRes.row, gameRes.col, !gameInfo.isWhite);
        } else {
            console.log("落子异常");
            return;
        }
        // 标记此处有棋子
        if (gameRes.row >= 0 && gameRes.col >= 0) {
            chessBoard[gameRes.row][gameRes.col] = 1;
        } else {
            // 提示对手掉线，并返回游戏大厅
            alert("对方已掉线，恭喜你！你赢了！");
            location.replace("/game_hall.html");
        }
        // 交换轮次
        me = !me;
        let screenDiv = document.querySelector('#screen');
        // 判定胜负
        if(gameRes.winner != 0) {
            if(gameRes.winner == gameInfo.thisUserId) {
                screenDiv.innerHTML = "恭喜你！你赢了！";
            } else if(gameRes.winner == gameInfo.thatUserId) {
                screenDiv.innerHTML = "很遗憾！你输了..."
            } else if(gameRes.winner == -1) {
                screenDiv.innerHTML = "平局";
            } else {
                console.log("字段错误！" + gameRes.winner);
            }
            // 增加一个按钮，让玩家点击按钮后再返回到游戏大厅
            let backBtn = document.createElement('button');
            backBtn.id = "back-button";
            backBtn.innerHTML = '回到大厅';
            backBtn.onclick = function() {
                location.replace("/game_hall.html");
            }
            let fatherDiv = document.querySelector('.container>div');
            fatherDiv.appendChild(backBtn);
        } else {
            setScreenText(me);
        }
    }
}

// initGame();
